<template>
  <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
</template>

<script setup>
import { ref, onMounted, defineExpose } from 'vue';
import * as echarts from 'echarts';

const chartContainer = ref(null);

onMounted(() => {
  if (chartContainer.value) {
    const myChart = echarts.init(chartContainer.value);
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false, title: '数据视图' },
          magicType: { show: true, type: ['line', 'bar'], title: '切换视图' },
          restore: { show: true, title: '重置' },
          saveAsImage: { show: true, title: '保存图片' }
        }
      },
      legend: {
        data: ['客房入住率', '客房预订量', '平均房价(元)'],
        textStyle: {
          color: '#333'
        }
      },
      xAxis: [
        {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            interval: 0
          },
          axisPointer: {
            label: {
              show: true
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '客房入住率(%)',
          min: 0,
          max: 100,
          interval: 20,
          axisLabel: {
            formatter: '{value} %'
          }
        },
        {
          type: 'value',
          name: '客房预订量(间)',
          min: 0,
          max: 500,
          interval: 100,
          axisLabel: {
            formatter: '{value}'
          }
        }
      ],
      series: [
        {
          name: '客房入住率',
          type: 'bar',
          data: [60, 65, 70, 75, 80, 85, 90],
          label: {
            show: true,
            position: 'top'
          }
        },
        {
          name: '客房预订量',
          type: 'bar',
          yAxisIndex: 1,
          data: [120, 150, 180, 210, 240, 270, 300],
          label: {
            show: true,
            position: 'top'
          }
        },
        {
          name: '平均房价(元)',
          type: 'line',
          yAxisIndex: 1,
          data: [250, 260, 270, 280, 290, 300, 310],
          label: {
            show: true,
            position: 'top'
          }
        }
      ]
    };
    myChart.setOption(option);
  } else {
    console.error('DOM元素未找到');
  }
});

defineExpose({ echarts }); // 暴露 echarts 对象
</script>
